<template>
  <div>
    <div class="formheard">
      <span style="font-size: 12px; color: pink">
        说明：目前支持学科和关键字条件筛选
      </span>
      <el-row>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </el-row>
    </div>
    <div>
      <el-form ref="form" :model="formData" label-width="80px" size="small">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                placeholder="请选择"
                v-model="formData.subjectID"
                @change="onChange"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="formData.catalogID">
                <el-option
                  v-for="item in catalogueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="formData.tags">
                <el-option
                  v-for="item in labelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                placeholder="根据题干搜索"
                v-model="formData.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="formData.questionType">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select placeholder="请选择" v-model="formData.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="formData.direction">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="formData.creator">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="formData.enterpriseID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row type="flex" justify="space-between">
                <el-col :span="11">
                  <el-select
                    placeholder="请选择"
                    v-model="formData.province"
                    @change="provinceChange"
                  >
                    <el-option
                      v-for="(item, index) in provinces"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="11">
                  <el-select placeholder="请选择" v-model="formData.city">
                    <el-option
                      v-for="(item, index) in citys"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="float: right">
              <el-button size="mini" @click="clear">清除</el-button>
              <el-button type="primary" size="mini" @click="submitBtn"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as catalog } from '@/api/hmmm/directorys'
import { simple as tags } from '@/api/hmmm/tags'
import { simple as userList } from '@/api/base/users'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  name: 'QuestionForm',
  data () {
    return {
      formData: {
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 题型
        difficulty: null, // 难度
        direction: null, // 方向
        creator: null, // 录入人
        remarks: null, // 题目备注
        enterpriseID: null, // 企业
        province: null, // 省份
        city: null // 城市
      },
      subjectList: [], // 学科列表
      catalogueList: [], // 目录列表
      labelList: [], // 标签列表
      difficulty, // 试题类型
      questionType, // 难度
      direction, // 方向
      provinces: provinces(), // 城市
      citys: '', // 城市下地区
      userList: [] // 录入人列表
    }
  },
  created () {
    // 获取学科简单列表
    this.getsubject()

    // 获取用户列表
    this.getuser()
  },
  methods: {
    // 获取学科简单列表
    async getsubject () {
      const res = await simple()
      this.subjectList = res.data
    },

    // 获取目录列表
    async getcatalogue () {
      const res = await catalog(this.formData)
      this.catalogueList = res.data
    },

    // 获取标签列表
    async getlabel () {
      const res = await tags(this.formData)
      this.labelList = res.data
    },

    // 获取录入人列表
    async getuser () {
      const res = await userList()
      this.userList = res.data
    },

    // 学科下拉框
    onChange () {
      // 获取目录列表
      this.getcatalogue()
      // 获取标签列表
      this.getlabel()
    },

    // 城市下拉框
    provinceChange () {
      this.citys = citys(this.formData.province)
    },

    // 搜索按钮
    submitBtn () {
      for (const key in this.formData) {
        if (this.formData[key] !== null) {
          this.$emit('search', this.formData)
        }
      }
    },

    // 清除按钮
    clear () {
      this.formData = {
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        questionType: null, // 题型
        difficulty: null, // 难度
        direction: null, // 方向
        creator: null, // 录入人
        remarks: null, // 题目备注
        enterpriseID: null, // 企业
        province: null, // 省份
        city: null // 城市
      }
      this.$emit('search2')
    }
  }
}
</script>

<style>
.formheard {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
}
.heardform {
  display: flex;
  flex: 1;
  /* justify-content: space-between; */
  /* align-content: space-between; */
  flex-wrap: wrap; /* 换行 */
  margin-top: 10px;
}

.city {
  width: 100px;
}
.city2 {
  width: 105px;
  padding-left: 5px;
}

.clear {
  width: 300px;
  padding-left: 178px;
  padding-top: 5px;
}
.Keyword {
  width: 203px;
}
.el-select {
  width: 100%;
}
</style>
